<template>
	<view>
		<view>图片上传</view>
		<button @click="upload">上传图片</button>
		<image v-for="(item, i) in imgArr" :key="i" :src="item" @click="previewImage(item)"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgArr: []
		};
	},
	methods: {
		upload() {
			// 从本地相册选择图片或使用相机拍照
			uni.chooseImage({
				count: 5, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], // 指定上传的是原图还是压缩图，original原图，compressed压缩图，默认都有
				//sourceType: ['album'], // album从相册选图，camera使用相机，默认二者都有，如需直接开相机或直接选相册，只使用一个选项
				// 成功则返回图片的本地文件路径列表tempFilePaths
				success: res => {
					this.imgArr = res.tempFilePaths;
				},
				// 接口调用失败的回调函数
				fail() {},
				// 接口调用结束的回调函数（调用成功、失败都会执行）
				complete() {}
			});
		},
		previewImage(current) {
			// 预览图片
			uni.previewImage({
				current: current, // 当前显示图片的链接/索引值，不填或填写的值无效则为urls的第一张
				urls: this.imgArr, // Array<String>需要预览的图片链接列表
				indicator: 'number', // 只能在APP上起作用，图片指示器样式，可取值："default"底部圆点指示器；"number"顶部数字指示器；"none"不显示指示器
				loop: true, // 只能在APP上起作用，是否可循环预览，默认值为false
				// 长按图片显示操作菜单，如不填默认为保存相册
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'], // Array<String>按钮的文字数组
					itemColor: '#000000', // 按钮的文字颜色，字符串格式，默认为"#000000"
					// 接口调用成功的回调函数
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					// 接口调用失败的回调函数
					fail: function(err) {
						console.log(err.errMsg);
					},
					// 接口调用结束的回调函数（调用成功、失败都会执行
					complete() {}
				}
			});
		}
	}
};
</script>

<style></style>
